<template>
  <el-container style="height: 100%; padding: 12px">
    <el-header height="40px" style="padding: 0">
      <el-form ref="queryForm" :model="searchParams" :inline="true" label-width="68px">
        <el-form-item size="mini" label="" prop="name">
          <el-input
            v-model="searchParams.name"
            placeholder="请输入名称"
            clearable
            @keyup.enter.native="searchHandle"
          />
        </el-form-item>
        <el-form-item size="mini" label="" prop="type">
          <el-select
            v-model="searchParams.category"
            placeholder="请选择类型"
            clearable
            style="width: 140px"
          >
            <el-option
              v-for="fileType in categorys"
              :key="fileType.value"
              :label="fileType.label"
              :value="fileType.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item size="mini">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="searchHandle">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetSearch">重置</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addHandle">新增</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteHandle">删除</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main style="padding: 0">
      <el-table v-loading="loading" size="small" :data="tableData.data" @selection-change="selectionChangeHandle">
        <el-table-column type="selection" width="60" align="center" />
        <el-table-column label="名称" align="center" min-width="90">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover" :content="scope.row.name">
              <div slot="reference" class="ellipsis">{{ scope.row.name }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" prop="category" min-width="50" />
        <el-table-column label="扩展名" align="center" prop="fileType" min-width="90" />
        <el-table-column label="上传人" align="center" prop="creatorName" min-width="50" />
        <el-table-column label="上传时间" align="center" prop="createTime" min-width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateFilter('yyyy-mm-dd hh:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['system:dict:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="modifyHandle(scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <pagination
        :total="tableData.total"
        :page.sync="searchParams.pageNum"
        :limit.sync="searchParams.pageSize"
        @pagination="queryList"
      />
    </el-footer>
    <add-or-update-dialog :show.sync="dialogShow" :title="dialogTitle" :data="dialogData" @change="dataChangeHandler" />
  </el-container>
</template>
<script>
import { page, deleteById } from '@/api/baseManage/knowledgeBase'
import AddOrUpdateDialog from './components/AddOrUpdateDialog'
export default {
  name: 'KnowledgeBase',
  components: {
    AddOrUpdateDialog
  },
  data() {
    return {
      searchParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        category: ''
      },
      selection: [],
      categorys: [],
      tableData: {
        data: [],
        total: 0
      },
      loading: false,
      dialogShow: false,
      dialogTitle: '',
      dialogData: {}
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    /**
     * 搜索按钮操作
     */
    searchHandle() {
      this.searchParams.pageNum = 1
      this.queryList()
    },
    /**
     * 重置搜索条件
     */
    resetSearch() {
      this.searchParams.pageNum = 1
      this.searchParams.name = ''
      this.searchParams.type = ''
      this.queryList()
    },
    /**
     * 数据变更处理
     * @param data
     */
    dataChangeHandler(data) {
      this.queryList()
    },
    /**
     * 查询列表
     */
    queryList() {
      this.loading = true
      page(this.searchParams).then(res => {
        if (res.code === 200) {
          this.tableData = { data: res.data.records, total: res.data.total }
        } else {
          this.$message.error(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 添加
     */
    addHandle() {
      this.dialogTitle = '新增'
      this.dialogData = {}
      this.dialogShow = true
    },
    /**
     * 修改
     */
    modifyHandle(data) {
      this.dialogTitle = '修改'
      this.dialogData = {
        id: data.id,
        name: data.name,
        category: data.category,
        description: data.description,
        fileId: data.fileId,
        fileName: data.fileName
      }
      this.dialogShow = true
    },
    /**
     * 删除
     * @param data
     */
    deleteHandle(data = {}) {
      const ids = data.id ? [data.id] : this.selection.map(item => item.id)
      if (ids.length === 0) {
        this.$message.warning('未勾选删除记录')
        return
      }
      this.$confirm('是否删除记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteById(ids).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.queryList()
          } else {
            this.$message.error('删除失败')
          }
        }).catch(_ => {
          this.$message.error('删除失败')
        }).finally(() => {
          this.loading = false
        })
      })
    },
    /**
     * 列表勾选项变化
     * @param val
     */
    selectionChangeHandle(val) {
      this.selection = val
    }
  }
}
</script>

<style scoped>

</style>
